<template>
  <div class="comment">
    <div class="comment-title">
      <div class="comment-textarea">
        <img src="./images/touxiang.jpg" alt="" />
        <textarea
          name=""
          id=""
          cols="98"
          rows="5"
          placeholder="评论"
        ></textarea>
      </div>
      <div class="nice">
        <img src="./images/23123(1).jpg" alt="" />
        <img src="./images/123.jpg" alt="" />
        <div class="pinlunbtn">
          <span style="color: gray; margin-right: 5px">140</span>
          <el-button type="primary" size="mini">评论</el-button>
        </div>
      </div>
    </div>
    <!-- 精彩评论区 -->
    <div class="songlist-1">
      <span>精彩评论</span>
      <div class="commentlist" v-for="item in comments" :key="item.commentId">
        <div class="flex">
          <img :src="item.user.avatarUrl" alt="" />
          <div class="commenttext">
            <a href="#" style="color: blue">{{ item.user.nickname }}</a>
            <span>{{ item.content }}</span>
          </div>
        </div>
        <div class="commentnice">
          <span>{{ handleCommentTime(item) }}</span>
          <div class="dianzan">
            <a href="#"
              ><span class="el-icon-star-off">{{ item.likedCount }}</span></a
            >
            <span class="niceshu">|</span>
            <a href="#"><span>回复</span></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { mapState, mapActions } from 'vuex'
export default {
  name: 'Commends',
  data() {
    return {
      time: '',
      comments: []
    }
  },
  props: {
    ids: Number,
    type: String
  },
  computed: {
    ...mapState({
      songComment: (state) => state.singleplay.songComment,
      songListChat: (state) => state.recommendsongs.songListChat
    })
  },
  methods: {
    ...mapActions('singleplay', ['getChat']),
    ...mapActions('recommendsongs', ['getSongListChat']),
    handleCommentTime(item) {
      return dayjs(item.time).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  async mounted() {
    if (this.type === 'songList') {
      await this.getSongListChat({ ids: this.ids })
      this.comments = this.songListChat
    } else {
      await this.getChat({ ids: this.ids })
      this.comments = this.songComment
    }
  }
}
</script>

<style scoped>
.comment {
  height: 100%;
  margin-top: 20px;
}
.comment-title {
  width: 640px;
  height: 150px;
  margin: 0 auto;
}
.comment-textarea {
  display: flex;
}
.comment-textarea textarea {
  margin-top: 10px;
}
.comment-textarea img {
  width: 50px;
  height: 50px;
  margin: 10px;
}
.nice {
  width: 599px;
  height: 35px;
  display: block;
  margin-left: 70px;
  display: flex;
}
.nice img {
  width: 23px;
  height: 23px;
}
.nice .pinlunbtn {
  margin-left: 470px;
  margin-top: 5px;
}
.songlist-1 {
  width: 640px;
  border-bottom: 1px solid rgb(201, 201, 201);
  margin: 0 auto;
  line-height: 35px;
  margin-top: 20px;
}
.songlist-1:last-child {
  border-bottom: 1px solid transparent;
}
.commentlist {
  width: 670px;
  height: 102px;
  padding: 15px 0;
  border-bottom: 1px dotted gray;
}
.commentlist:last-child {
  border-bottom: 1px solid transparent;
}
.flex {
  display: flex;
}
.commentlist img {
  width: 50px;
  height: 50px;
  margin: 10px;
}
.commentnice {
  width: 600px;
  height: 20px;
  margin-left: 62px;
  line-height: 20px;
  padding-left: 7px;
}
.commentnice span {
  color: gray;
}
.commentnice .dianzan {
  display: inline-block;
  margin-left: 350px;
}
.commentnice .dianzan .niceshu {
  margin: 0 8px 0 0;
}
</style>
